<template>
  <Sheet :shadow="2" :round="2">
    <Row :height="200" :column="3" :width="system._rpxWidth - 96" :margin="[0]">
      <Col :margin="[0, 0, 12, 0]" :height="160">
      <Sheet :round="2" :border="2" :width="itemWidth" :height="160" :margin="[0]" :padding="[12]" :shadow="2">
        <view>
          <Text label="喜欢的音乐" />
          <Text :label="`${listenSongs ?? 0}首`" />
        </view>
        <!-- <Text label="听歌排行" /> -->
      </Sheet>
      </Col>
      <Col :margin="[0, 0, 12, 0]" :height="160">
      <Sheet :round="2" :border="2" :width="itemWidth" :height="160" :margin="[0]" :padding="[12]" :shadow="2">
        <view>
          <Text label="累计听歌" />
          <Text :label="`${listenSongs ?? 0}首`" />
        </view>
        <Text label="听歌排行" />
      </Sheet>
      </Col>
      <Col :margin="[0, 0, 12, 0]" :height="160">
      <Sheet :round="2" :border="2" :width="itemWidth" :height="160" :margin="[0]" :padding="[12]" :shadow="2">
        <view>
          <Text label="本周关键词" />
          <Text :label="`${listenSongs ?? 0}首`" />
        </view>
        <Text label="听歌排行" />
      </Sheet>
      </Col>
    </Row>
  </Sheet>
</template>
<script setup lang='ts'>
import { userStore, systemStore } from '@/stores';
import Row from '@/tmui/components/tm-row/tm-row.vue';
import Col from '@/tmui/components/tm-col/tm-col.vue';
import Text from '@/tmui/components/tm-text/tm-text.vue';
import Sheet from '@/tmui/components/tm-sheet/tm-sheet.vue';

const props = defineProps({
  listenSongs: {
    type: Number,
    default: 0
  }
})
const user = userStore()
const system = systemStore()
const itemWidth = (system._rpxWidth / 3) - 72
const listenSongs = toRef(props, 'listenSongs')

const onInit = async () => {
  // const { code, ids } = await getLikeList(user.userInfo.userId)
  // if (code === 200) {
  //   const data = await getSongDetail(ids[0].toString())
  //   console.log(data);
  // }
}
onInit()

</script>
<style lang='scss' scoped>
.user-homepage-item {
  height: 160rpx;
  width: 100%;
  border: 2rpx solid red;
  border-radius: 10rpx;
}
</style>